import React, { useEffect, useState } from "react";
import { editChangeCity } from "../../store/CitySlice";
import { ResultPage, Card, IndexBar, List, Tag } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { useParams } from "react-router-dom";
import http from "../../api/http";
import { Tab } from "antd-mobile/es/components/tabs/tabs";

function Index() {
  const [cityList, setCityList] = useState([]);
  const [hotList, setHotList] = useState([]);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const {type} =useParams()
  const getCityList = async () => {
    const res = await http.get("/api/city");
    const { data, code } = res.data;
    console.log(data);
  
      setCityList(data.city);
      setHotList(data.hotCities);
    
  };
  useEffect(() => {
    getCityList();
  }, []);
  const handleToCity=(city)=>{
    dispatch(editChangeCity({type,city}))
    navigate("/")
  }
  return (
    <div>
      <Card title="热门城市">
        <div>
          {
            hotList?.map((item,index)=>(
              <Tag onClick={()=>handleToCity(item.name)} key={index} style={{margin:"15px"}}>
                {item.name}
              </Tag>
            ))
          }
        </div>
      </Card>
      <Card title="城市列表">
        <div  style={{ height: window.innerHeight }}>
          <IndexBar>
            {cityList.length > 0 &&
              cityList.map((group) => {
                const { initial, list } = group;
                return (
                  <IndexBar.Panel
                    index={initial}
                    title={`${initial}`}
                    key={`${initial}`}
                  >
                    <List>
                      {list.map((item, index) => (
                        <List.Item onClick={()=>handleToCity(item.name)} key={index}>{item.name}</List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                );
              })}
          </IndexBar>
        </div>
      </Card>
    </div>
  );
}

export default Index;
